<% content_for(:page_title) do %>
  <%= Spree.t(:analytics) %>
<% end %>

<%= turbo_frame_tag :analytics do %>
  <div class="card mb-4"
       data-controller="tabs"
       data-tabs-active-tab-class-value="active">
    <div class="card-header d-block border-0 h-auto p-2">
      <div class="row">
        <div class="col-6 col-lg-4 pr-2">
          <div class="analytics-card-tab active" data-tabs-target="tab" data-action="click->tabs#select">
            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
              <span class="font-size-sm text-muted">Total Sales</span>
              <span class="font-size-lg text-dark font-weight-bold mt-1">
                <%= @sales_total %>
              </span>
              <div>
                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @sales_growth_rate %>
              </div>
            </div>
          </div>
        </div>

        <div class="col-6 col-lg-2 pl-0 pr-2">
          <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
              <span class="font-size-sm text-muted">Avg. Order Value</span>
              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_average %></span>
              <div>
                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @orders_average_growth_rate %>
              </div>
            </div>
          </div>
        </div>

        <div class="col-6 col-lg-2 pl-0 pr-2">
          <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
            <div class="d-flex justify-content-center flex-column mb-3 mb-lg-0">
              <span class="font-size-sm text-muted">Total Orders</span>
              <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @orders_total  %></span>
              <div>
                <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @orders_growth_rate %>
              </div>
            </div>
          </div>
        </div>
        <% if @visits_total && @visits_growth_rate %>
          <div class="col-6 col-lg-2 pl-0 pr-2">
            <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
              <div class="d-flex justify-content-center flex-column">
                <span class="font-size-sm text-muted">Visits</span>
                <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @visits_total %></span>
                <div>
                  <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @visits_growth_rate %>
                </div>
              </div>
            </div>
          </div>
        <% end %>

        <% if @audience_total && @audience_growth_rate %>
          <div class="col-6 col-lg-2 pl-0">
            <div class="analytics-card-tab" data-tabs-target="tab" data-action="click->tabs#select">
              <div class="d-flex justify-content-center flex-column">
                <span class="font-size-sm text-muted">Sign-ups</span>
                <span class="font-size-lg text-dark font-weight-bold mt-1 me-3"><%= @audience_total %></span>
                <div>
                  <%= render 'spree/admin/shared/growth_rate_badge', growth_rate: @audience_growth_rate %>
                </div>
              </div>
            </div>
          </div>
        <% end %>
      </div>
    </div>
    <div class="card-body p-2">
      <div data-tabs-target="panel" class="animate__animated animate__fadeIn">
        <% if currency_money(current_currency).symbol_first? %>
          <%= line_chart @grouped_orders_scope.sum(:total), prefix: currency_money(current_currency).symbol, zeros: true, points: false, library: {
            animation: {
              duration: 300,
              easing: "linear"
            }
          } %>
        <% else %>
          <%= line_chart @grouped_orders_scope.sum(:total), suffix: currency_money(current_currency).symbol, zeros: true, points: false, library: {
            animation: {
              duration: 300,
              easing: "linear"
            }
          } %>
        <% end %>
      </div>
      <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
        <%= line_chart @grouped_orders_scope.average(:total), suffix: currency_money(current_currency).symbol, zeros: true, points: false %>
      </div>
      <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
        <%= line_chart @grouped_orders_scope.count, points: false %>
      </div>
      <% if @visits %>
        <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
          <%= line_chart @visits.count, points: false %>
        </div>
      <% end %>
      <% if @audience %>
        <div data-tabs-target="panel" class="animate__animated animate__fadeIn" hidden>
          <%= line_chart @audience.count, points: false %>
        </div>
      <% end %>
    </div>
  </div>

  <%= render 'top_products' if @top_products %>
  <%= render 'visits' if @visits %>

  <%= render_admin_partials(:dashboard_analytics_partials) %>
<% end %>
